<template>
  <div class="goodsOrderView">
    <div class="detailView">
      <el-button @click="$router.go(-1)"
                 class="mt-20"
                 type="primary">返 回</el-button>
      <div class="detail">
        <div class="name">订单编号</div>
        <div class="value">{{item.number}}</div>
      </div>
      <div class="detail">
        <div class="name">合计</div>
        <div class="value">{{item.price}}元</div>
      </div>
      <div class="detail">
        <div class="name">收货人</div>
        <div class="value">{{item.consignee}}</div>
      </div>
      <div class="detail">
        <div class="name">联系电话</div>
        <div class="value">{{item.phone}}</div>
      </div>
      <div class="detail">
        <div class="name">收货地址</div>
        <div class="value">{{item.address}}</div>
      </div>
      <div class="detail">
        <div class="name">订单状态</div>
        <div class="value">{{item.orderStatus|orderStatus}}</div>
      </div>
      <div class="detail">
        <div class="name">支付类型</div>
        <div class="value">{{item.payType|payType}}</div>
      </div>
      <div class="detail">
        <div class="name">商品详情</div>
        <div class="value"
             v-if="item.orderItemList">
          <template v-if="item.orderItemList.length > 0 && item.orderItemList[0].goodsDetail">
            {{item.orderItemList[0].goodsDetail.detailName}}
          </template>
        </div>
      </div>
      <Table border
             :columns="tableCol"
             :data="item.orderItemList"></Table>
      <div v-if="item.orderStatus == 1 || item.orderStatus == 2"
           style="padding:40px 0 20px 0;">
        <div>物流公司：
          <Select v-model="logisticsId"
                  style="width:260px">
            <Option v-for="item in logisticsList"
                    :value="item.id"
                    :key="item.id">{{ item.name }}</Option>
          </Select>
        </div>
        <div style="margin-top: 10px">
          物流编号： <Input v-model="logisticsNumber"
                 placeholder="请输入物流编号"
                 style="width: 260px" />
        </div>
        <p align="center">
          <el-button @click="$router.go(-1)"
                     class="mt-20"
                     type="primary">返 回</el-button>
          <el-button @click="ok"
                     type="primary">确 认 发 货</el-button>
        </p>
      </div>

    </div>
  </div>
</template>

<script>
  import { orderMgt } from '@/api/codeName'
  export default {
    name: "goodsOrderView",
    data () {
      return {
        logisticsId: '',
        logisticsNumber: '',
        item: {},
        tableCol: [
          {
            type: 'index2',
            title: '',
            width: 60,
            render: (h, params) => {
              return h('span', params.index + 1);
            }
          },
          {
            title: '商品',
            key: 'detailImageUrl',
            // width: 95,
            render: (h, params) => {
              return h('div', [
                h('img', {
                  attrs: {
                    src: !params.row.goodsItem ? params.row.goodsItem.imageUrl : './assets/images/address-empty.png',
                    preview: 'goodsOrderView'
                  },
                  style: {
                    width: '50px',
                    height: '50px',
                    margin: '1px',
                    borderRadius: '50%'
                  }
                }),
              ]);
            }
          },
          {
            title: '商品名称',
            key: 'detailName',
            render: (h, params) => {
              return h('span', params.row.goodsItem ? params.row.goodsItem.name : '暂无');
            }
          },
          {
            title: '数量',
            key: 'num',
          },
          {
            title: '金额（元）',
            key: 'prePrice',
          }
        ],
        logisticsList: []
      }
    },
    mounted () {
      this.initLogisticsList()
      this._getViewById()
    },
    methods: {
      ok () {
        if (!this.logisticsId) {
          this.$Message.error("请选择物流公司");
          return;
        }
        if (!this.logisticsNumber) {
          this.$Message.error("请输入物流编号");
          return;
        }
        let param = {
          id: this.$route.query.id,
          logisticsId: this.logisticsId,
          logisticsNumber: this.logisticsNumber
        };
        this.post(this.api.goods.shipped, param).then((res) => {
          if (res.data.code === '200') {
            this.$Message.success('发货成功');
          } else {
            this.$Message.error(res.data.message);
          }
        });
        this.sendGoodsView = false;
      },
      initLogisticsList () {
        this.post(this.api.logistics.getAllLogistics, {}).then((res) => {
          if (res.data.code === '200') {
            this.logisticsList = res.data.object;
          } else {
            this.$Message.error(res.data.message);
          }
        });
      },
      _getViewById () {
        this.ajax({
          type: this.api.goodsOrderView.type,
          url: this.api.goodsOrderView.url,
          data: {
            id: this.$route.query.id
          },
          success: (data) => {
            this.item = data.object
            this.$previewRefresh()
          },
          error: (data) => {
            this.$Message.error(data.message);
          }
        })
      }
    },
    filters: {
      orderStatus: (value) => {
        for (let i = 0; i < orderMgt.goodsOrderMgt.orderStatus.length; i++) {
          if (value == orderMgt.goodsOrderMgt.orderStatus[i].code) {
            return orderMgt.goodsOrderMgt.orderStatus[i].name
          }
        }
        return value
      },
      payType: (value) => {
        for (let i = 0; i < orderMgt.goodsOrderMgt.payType.length; i++) {
          if (value == orderMgt.goodsOrderMgt.payType[i].code) {
            return orderMgt.goodsOrderMgt.payType[i].name
          }
        }
        return value
      }
    }
  }
</script>

<style lang="scss" type="text/scss" rel="stylesheet/scss">
  .goodsOrderView {
  }
</style>
